<template>
  <div>
    <van-popup v-model="argShow" position="right" :style="{ height: '100%',width:'80%' }">
      <form action="/">
        <van-search
          v-model="keyWord"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item.id" :title="item.name" @click="itemClick(item)" />
      </van-list>
    </van-popup>
  </div>
</template>
<script>
import api from "../../tools/api";
import comm from "../../tools/comm";
export default {
  data() {
    return {
      argShow: false,
      list: [],
      total: 0,
      loading: false,
      finished: false,
      iItemClassID: 1,
      pageIndex: 1,
      keyWord: ""
    };
  },
  methods: {
    show(classId) {
      this.iItemClassID = classId;
      this.pageIndex = 1;
      this.argShow = true;
      this.finished = false;
      this.keyWord = "";
      this.list = [];
      this.getList();
    },
    hide() {
      this.argShow = false;
    },
    onSearch() {
      this.pageIndex = 1;
      this.list = [];
      this.getList();
    },
    onCancel() {
      this.keyWord = "";
      this.pageIndex = 1;
      this.list = [];
      this.getList();
    },
    getList() {
      let self = this;
      self.loading = true;
      api.ajax_kd({
        method: "KDItemClassInfoEx1",
        parma: {
          iItemClassID: self.iItemClassID,
          iPageIndex: self.pageIndex,
          iPageSize: comm.PAGE_SIZE,
          sKeyWord: self.keyWord
        },
        s(code, res) {
          // console.log(JSON.stringify(res));
          self.loading = false;
          if (code == 1) {
            self.total = res.data.Total;
            res.data.List.forEach(e => {
              let item = {
                id: e.ID,
                name: e.FName,
                value: e
              };
              self.list.push(item);
            });
          }
        }
      });
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // 加载状态结束
        this.pageIndex++;
        this.getList();
        // this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= this.total || this.list.length == 0) {
          this.finished = true;
        }
      }, 500);
    },
    itemClick(item) {
      console.log(JSON.stringify(item));
      this.hide();
      this.$emit("select", item);
    }
  }
};
</script>